<script setup lang="ts">
import { RouterView, useRoute } from 'vue-router'
import BaseHearder from '@/components/layout/BaseHearder.vue'
import BaseSide from '@/components/layout/BaseSide.vue'
import { useHomeStore } from '@/stores/home.ts';
import { ref, watch } from 'vue'
const sideShow = ref(false)
const route = useRoute()
const store = useHomeStore()
watch(
  () => route.path,
  (newPath) => {
    store.setactiveIndex(newPath)
    if (newPath.includes('map-manage')) {
      sideShow.value = true
    } else {
      sideShow.value = false
    }
  }
);
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header height="0.6rem">
        <BaseHearder />
      </el-header>
      <el-container>
        <el-aside width="2rem" v-show="sideShow">
          <BaseSide />
        </el-aside>
        <el-main>
          <RouterView :key="route.fullPath" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.el-main {
  padding: 0 !important;
}
</style>
